<template>
  <div class="wall-grid">
    <div v-for="(item, index) of columns[type]" :style="item" class="item">
      <slot :index="index" />
    </div>
  </div>
</template>

<script>
const columns = {
  1: [{ width: '100%', height: '100%' }],
  2: [
    { width: '50%', height: '100%' },
    { width: '50%', height: '100%' },
  ],
  3: [
    { width: '50%', height: '100%' },
    { width: '50%', height: '50%' },
    { width: '50%', height: '50%' },
  ],
  4: [
    { width: '50%', height: '50%' },
    { width: '50%', height: '50%' },
    { width: '50%', height: '50%' },
    { width: '50%', height: '50%' },
  ],
  5: [
    { width: '50%', height: '50%' },
    { width: '50%', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
  ],
  6: [
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
    { width: 'calc(100% / 3)', height: '50%' },
  ],
  7: [
    { width: 'calc(100% / 3)', height: 'calc((100% / 3) * 2)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: '50%', height: 'calc(100% / 3)' },
    { width: '50%', height: 'calc(100% / 3)' },
  ],
  8: [
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
    { width: '25%', height: '50%' },
  ],
  9: [
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
    { width: 'calc(100% / 3)', height: 'calc(100% / 3)' },
  ],
  16: [
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },

    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },

    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },

    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
    { width: 'calc(100% / 4)', height: 'calc(100% / 4)' },
  ],
};
export default {
  name: 'wall-grid',
  props: {
    type: { type: [Number, String], default: 1 },
  },
  data() {
    return {
      columns,
    };
  },
};
</script>

<style scoped lang="less">
.wall-grid {
  width: 100%;
  height: 100%;
  .item {
    float: left;
    border: 1px solid #5bb0ff;
  }
}
</style>
